<template>
	<div :class="curClassName" :style="curStyle">
		<template v-if="Object.is(renderMode, 'TEXT')">
			<span class="view__caption__info">
				<slot></slot>
			</span>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING1')">
			<h1 class="view__caption__info">
				<slot></slot>
			</h1>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING2')">
			<h2 class="view__caption__info">
				<slot></slot>
			</h2>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING3')">
			<h3 class="view__caption__info">
				<slot></slot>
			</h3>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING4')">
			<h4 class="view__caption__info">
				<slot></slot>
			</h4>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING5')">
			<h5 class="view__caption__info">
				<slot></slot>
			</h5>
		</template>
		<template v-else-if="Object.is(renderMode, 'HEADING6')">
			<h6 class="view__caption__info">
				<slot></slot>
			</h6>
		</template>
		<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
			<p class="view__caption__info">
				<slot></slot>
			</p>
		</template>
	</div>
</template>
<script setup lang="ts">
import { PresetCaptionProps } from './preset-caption';

const props = defineProps(PresetCaptionProps);

/**
 * 项名称
 *
 * @memberof AppPresetCaption
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 绘制模式
 *
 * @memberof AppPresetCaption
 */
const renderMode = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.renderMode == 'HEADING1'
			? 'TEXT'
			: layoutModel.renderMode;
	}
});

/**
 * 当前容器样式类
 *
 * @memberof AppPresetCaption
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-preset-caption ${itemName.value} ${layoutModel.sysCss || ''}`;
	}
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetCaption
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});
</script>
